<template>
	<mt-tabbar v-model="tabbarItem" fixed>
		<mt-tab-item v-for="item in tabbarData" :id="item.id" :key="item.id" @click.native="handleChangeTabbar(item.id)">
			<!--<img slot="icon" :src="testTabbarImgBase64">-->
			<i class="iconfont" :class="item.iconClass"></i>
			<span>{{item.name}}</span>
		</mt-tab-item>
	</mt-tabbar>
</template>

<script>
	export default {
		name: 'tabbar',
		data() {
			return {
				testTabbarImgBase64: '',
				tabbarData: [{
					id: 'index',
					name: '商场首页',
					iconClass: 'icon-home1'
				}, {
					id: 'product_classify',
					name: '商品分类',
					iconClass: 'icon-classify'
				}, {
					id: 'cart',
					name: '购物车',
					iconClass: 'icon-cart'
				}, {
					id: 'mine',
					name: '会员中心',
					iconClass: 'icon-user'
				}],
				tabbarItem: sessionStorage.getItem('tabbarItem') || 'index',
			}
		},
		methods: {
			handleChangeTabbar(idx) {
				sessionStorage.setItem('tabbarItem', idx);
				this.$router.replace(idx);
			}
		}
	}
</script>

<style lang="less">
	.mint-tabbar {
		.mint-tab-item-label {
			.iconfont {
				font-size: 0.42rem;
			}
			span {
				margin-top: 5px;
				display: block;
			}
		}
	}
</style>